<template>
  <view class="dynamicDetailBox">
    <!-- 关注 -->
    <concern
      :avatar="dynamicDetail?.dUser.uAvatar"
      :username="dynamicDetail?.dUser.uName"
    ></concern>

    <!-- 主体内容 -->
    <content_show :content="dynamicDetail?.dContent"></content_show>

    <!-- 图片展示 -->
    <photo_show :image-list="dynamicDetail?.dImg.split(',')"></photo_show>

    <!-- 排序 -->
    <view class="sort">
      <sort :title="'评论(' + commentsList.length + ')'"></sort>
    </view>

    <!-- 评论区 -->
    <view class="comments" v-if="commentsList.length > 0">
      <comments
        v-for="(item, index) in commentsList"
        :key="item.cId"
        :username="item.cUser.uName"
        :content="item.cContent"
        :time="item.cTime"
        :avatar="item.cUser.uAvatar"
      ></comments>
    </view>

    <!-- 默认无信息展示组件 -->
    <view v-else>
      <not_yet></not_yet>
    </view>

    <!-- 底部技术信息展示 -->
    <bottom_information></bottom_information>

    <!-- 回复框 -->
    <reply
      @send="sendComments"
      @thumbs-up="thumbsUp"
      :comments-list="commentsList.length"
      :is-thumbs-up="isThumbsUp"
    ></reply>

    <load :status="loadStatus"></load>
  </view>
</template>

<script lang="ts" setup>
import content_show from '../../components/content_show/content_show.vue'
import photo_show from '../../components/photo_show/photo_show.vue'
import concern from '../../components/concern/concern.vue'
import reply from '../../components/reply/reply.vue'
import comments from '../../components/comments/comments.vue'
import sort from '../../components/sort/sort.vue'
import bottom_information from '../../components/bottom_information/bottom_information.vue'
import not_yet from '../../components/not_yet/not_yet.vue'
import { reqPageById, reqCommentsInsert } from '@/api/comments'
import { updateSupport, isSupport } from '@/api/dynamic'
import type { CommentsPage } from '@/config/data/data'
import { useUserStore } from '@/pinia/user'
import type {
  ResultDynamicDetail,
  ResultPageComments,
} from '@/config/data/result'
import { DYNAMIC_DETAIL } from '@/config/constant/index'
import load from '@/components/load/load.vue'
import {
  onLoad,
  onReady,
  onShow,
  onHide,
  onUnload,
  onPageScroll,
} from '@dcloudio/uni-app'
import { ref } from 'vue'

interface Comments {
  username: string
  avatar: string
  content: string
  time: Date
}

const use = useUserStore()

//监听评论回复事件
const sendComments = (message: string) => {
  commentsList.value.push({
    cId: commentsList.value[commentsList.value.length - 1].cId + 1,
    cTime: new Date(),
    cContent: message,
    cUser: {
      uId: use.userInfo.uId,
      uName: use.userInfo.uName,
      uAvatar: use.userInfo.uAvatar,
      uPhone: null,
      uStatue: use.userInfo.uStatue,
      uCreateTime: use.userInfo.uCreateTime,
    },
  })

  reqCommentsInsert({ cDId: selectPage.value.cDId, cContent: message }).then(
    (res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 1500,
        mask: true,
      })
    }
  )

  // CommentsAdd
}

//监听点赞事件
const thumbsUp = () => {
  isThumbsUp.value = !isThumbsUp.value
  if (dynamicDetail.value) {
    updateSupport({ id: dynamicDetail.value.dId }).then((res) => {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        duration: 1500,
        mask: true,
      })
    })
  }
}

//是否点赞
const isThumbsUp = ref<boolean>(false)

//评论列表数据
const commentsList = ref<ResultPageComments[]>([])

//分页查询评论条件
const selectPage = ref<CommentsPage>({
  size: 10,
  page: 1,
  cDId: 0,
})

//详情内容列表
const dynamicDetail = ref<ResultDynamicDetail>()

//初始数据加载状态
const loadStatus = ref<boolean>(true)

// 加载评论数据
const loadData = () => {
  reqPageById(selectPage.value).then((res) => {
    //如果res.data不为空
    if (res.data) {
      commentsList.value.unshift(...(res.data as ResultPageComments[]))
    }
    setTimeout(() => {
      loadStatus.value = false
    }, 200)
  })
}

// 页面周期函数--监听页面加载
onLoad((e: AnyObject | undefined) => {
  if (e) {
    //获取文章信息
    dynamicDetail.value = JSON.parse(uni.getStorageSync(e.id))
    //获取评论信息
    if (dynamicDetail.value) {
      selectPage.value.cDId = dynamicDetail.value.dId
      //加载评论数据
      loadData()
      //检查文章是否点赞
      isSupport(selectPage.value.cDId).then((res) => {
        if (res.data) {
          isThumbsUp.value = res.data as boolean
        }
      })
    }
    setTimeout(() => {
      loadStatus.value = false
    }, 200)
  }
})

// 页面周期函数--监听页面初次渲染完成
onReady(() => {})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {})
// 页面周期函数--监听页面隐藏
onHide(() => {})
// 页面周期函数--监听页面卸载
onUnload(() => {
  // 清除本地存储
  uni.removeStorage({
    key: DYNAMIC_DETAIL + dynamicDetail.value?.dId,
    success: (result) => {},
    fail: (error) => {},
  })
})
</script>

<style scoped lang="scss">
.dynamicDetailBox {
  position: relative;
  width: 680rpx;
  margin: auto;
  min-height: 100vh;

  .comments {
    width: 100%;
    padding: 20rpx 0 0;
    border-top: 2rpx solid rgba(178, 176, 176, 0.457);
  }

  .sort {
    margin-top: 20rpx;
  }
}
</style>
